<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="singer.css">
</head>
<body>
   <div class="box clearfix">
       <!-- 左半部分 -->
      <div class="left">
       <div class="type-item">
          <h2>推荐</h2>
          <ul>
              <li class="active">
                  <!--  data-type="-1" data-area="-1" 从服务端传递的数据 ，根据接口文档写你需要的数据-->
                  <a href="javascript:;" data-type="-1" data-area="-1">全部</a>
              </li>
          </ul> 
       </div>
       <div class="type-item">
        <h2>华语</h2>
        <ul>
            <li>
                <a href="javascript:;" data-type="1" data-area="7">华语男歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="2" data-area="7">华语女歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="3" data-area="7">华语组合/乐队</a>
            </li>
        </ul>
    </div>
    <div class="type-item">
        <h2>欧美</h2>
        <ul>
            <li>
                <a href="javascript:;" data-type="1" data-area="96">欧美男歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="2" data-area="96">欧美女歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="3" data-area="96">欧美组合/乐队</a>
            </li>
        </ul>
    </div>
    <div class="type-item">
        <h2>日本</h2>
        <ul>
            <li>
                <a href="javascript:;" data-type="1" data-area="8">日本男歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="2" data-area="8">日本女歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="3" data-area="8">日本组合/乐队</a>
            </li>
        </ul>
    </div>
    <div class="type-item">
        <h2>韩国</h2>
        <ul>
            <li>
                <a href="javascript:;" data-type="1" data-area="16">韩国男歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="2" data-area="16">韩国女歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="3" data-area="16">韩国组合/乐队</a>
            </li>
        </ul>
      </div>
      <div class="type-item">
        <h2>其他</h2>
        <ul>
            <li>
                <a href="javascript:;" data-type="1" data-area="0">其他男歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="2" data-area="0">其他女歌手</a>
            </li>
            <li>
                <a href="javascript:;" data-type="3" data-area="0">其他组合/乐队</a>
            </li>
        </ul>
      </div> 
   </div> 
   <!-- 右半部分 -->
   <div class="right">
      <div class="r-box">
          <div class="title clearfix">
              <h2 id="type">入驻歌手</h2>
              <a href="javascript:;">更多&gt;</a>
          </div>
          <!-- 字母 -->
          <div class="letters">
             <ul class="clearfix">
                 <!-- data- 自定义属性，根据需要要传递的数据 -->
                 <li class="active"><a href="javascript:;" data-letter="-1">热门</a></li>
                 <li><a href="javascript:;" data-letter="A">A</a></li>
                 <li><a href="javascript:;" data-letter="-B">B</a></li>
                 <li><a href="javascript:;" data-letter="C">C</a></li>
                 <li><a href="javascript:;" data-letter="D">D</a></li>
                 <li><a href="javascript:;" data-letter="E">E</a></li>
                 <li><a href="javascript:;" data-letter="F">F</a></li>
                 <li><a href="javascript:;" data-letter="G">G</a></li>
                 <li><a href="javascript:;" data-letter="H">H</a></li>
                 <li><a href="javascript:;" data-letter="I">I</a></li>
                 <li><a href="javascript:;" data-letter="J">J</a></li>
                 <li><a href="javascript:;" data-letter="K">K</a></li>
                 <li><a href="javascript:;" data-letter="L">L</a></li>
                 <li><a href="javascript:;" data-letter="M">M</a></li>
                 <li><a href="javascript:;" data-letter="N">N</a></li>
                 <li><a href="javascript:;" data-letter="O">O</a></li>
                 <li><a href="javascript:;" data-letter="P">P</a></li>
                 <li><a href="javascript:;" data-letter="Q">Q</a></li>
                 <li><a href="javascript:;" data-letter="R">R</a></li>
                 <li><a href="javascript:;" data-letter="S">S</a></li>
                 <li><a href="javascript:;" data-letter="T">T</a></li>
                 <li><a href="javascript:;" data-letter="U">U</a></li>
                 <li><a href="javascript:;" data-letter="V">V</a></li>
                 <li><a href="javascript:;" data-letter="W">W</a></li>
                 <li><a href="javascript:;" data-letter="X">X</a></li>
                 <li><a href="javascript:;" data-letter="Y">Y</a></li>
                 <li><a href="javascript:;" data-letter="Z">Z</a></li>
                 <li><a href="javascript:;" data-letter="0">其他</a></li>
                </ul>
          </div>
          <div class="artists">
              <ul class="clearfix" id="artists">
                   <!-- 根据服务器的数据，创建li，我们先创建看样式，在删除 -->
                   <!-- <li>
                       <a href="">
                           <img src="./img/demo.jpg" alt="">
                           <p>薛之谦</p>
                       </a>
                   </li> -->
                   <!-- <li>
                    <a href="">
                        <img src="./img/demo.jpg" alt="">
                        <p>薛之谦</p>
                    </a>
                </li> -->
              </ul>
          </div>
      </div>
   </div>
   </div>
 <div class="loading">正在加载.....</div>
 <script src="lazyload.js"></script>
 <script>
     //获取歌手分类,右半部分最上面的标题
     var type=document.querySelector("#type")
     //获取歌手展示的ul,向里面追加li
     var artists =document.querySelector("#artists")
     //获取侧边栏，每一个li
     var lis=document.querySelectorAll(".left li")
     //获取字母分类
     var letters=document.querySelectorAll(".letters li")
     //获取加载的div
     var loading=document.querySelector(".loading")
     
     //定义全局变量，记录当前需要展示的数据
     var startType=-1 //初始值随便，歌手分类
     var startArae=-1  //歌手的地区
     var title="入驻歌手"  //标题
     var page=0  //显示的页数
     var letter="-1" //字母查找

     var result=""
     
     function getArtists(type,area,initial,page,callback){
      //展示正在加载
       loading.classList.add("show")
       var  xhr=new XMLHttpRequest()
       var url=`https://autumnfish.cn/artist/list?type=${type}&area=${area}&initial=${initial}&limit=30&offset=${page}`
       xhr.open("GET",url)
       xhr.send()
       //监听网络状态
       xhr.onreadystatechange=function(){
       if(xhr.status===200&&xhr.readyState==4){
        loading.classList.add("show")
        callback(xhr.responseText)
       }
       }
    }

    //首次渲染，重新调用函数
    getArtists(startType,startArae,letter,page,function(res){
        console.log(res)
        //把字符串转化为JSON对象
        var data=JSON.parse(res)
        console.log(data)
        //展示数据
        showUi(title,data,true) //title就是你从服务端获得的 var title="入驻歌手" 标题  data就是你的数据
    })
    //more滚动的时候加载更多,data是一个对象,
    function showUi(title,data,more){
      type.innerHTML=title
      var html=``
      for(let i=0;i<data.artists.length;i++){
         const art=data.artists[i]
// <a href="detail.html?"> 跳转到其他页面的同时传参数，来表示不同
         html+=`
          <li>
            <a href="歌手详情.html?id=${art.id}&name=${art.name}&img=${art.picUrl}">
             <img src="./img/loading.gif" data-src="${art.picUrl}" class="i1" alt="${art.name}">
             <p>${art.name}</p>
            </a>
          </li>
         `
      }
      //more=ture 需要加载更多
      //more就是滑动的时候就是true，在原来图片li的基础上，添加新的图片li
      //如果没有滑动的时候就是false，显示原来的数据
      if (more) {
         artists.innerHTML=artists.innerHTML+html
      }else{
        artists.innerHTML= html
      }

      //实现懒加载功能,第三方，看文档如何使用
      //获取加载的图片，然后你的图片里面有src和data-src 
     new LazyLoad(document.querySelectorAll(".i1"))
    }
     
    //歌手详情
    for(let i=0;i<lis.length;i++){
        const li=lis[i]
        li.addEventListener("click",function(){
            // letter=-1 //默认是热门
            // //遍历左边的字母项，使热门处于选中状态
            // letters.forEach(function(v,i,a){
            //   if(i===0){
            //       v.classList.add("active")
            //   }else{
            //       v.classList.remove("active")
            //   }
            // })
            // page=0;

            //控制自身侧边导航的样式
            lis.forEach(function(v,i,a){
                v.classList.remove("active")
            })
            this.classList.add("active")

            //点击侧边项需要把data-type和date-area的属性值取出来
            var a=this.children[0]
            //自定义属性时一般都要用data-XXX, 获取的时候要用 .dataset.XXX来获取属性值
            startType=a.dataset.type
            startArae=a.dataset.area
            title=a.textContent.trim()
            //重新进行渲染
            getArtists(startType,startArae,letter,page,function(res){
                var data=JSON.parse(res)
               
                showUi(title,data)
            })
        })
    }
    //点击字母分类
    letters.forEach(function(le){
        le.onclick=function(){
            letters.forEach(function(v,i,a){
                v.classList.remove("active")
            })
            le.classList.add("active")

            //取字母的值
            letter=le.children[0].dataset.letter
            getArtists(startType,startArae,letter,page,function(res){
                  var data=JSON.parse(res)
                  showUi(title,data)
            })
        }
    })
    //触底加载更多
       window.onscroll=function(e){
           //元素高度，html高度
         var clientHeight=document.documentElement.clientHeight
         //滚出去的高度
         var scrollTop=document.documentElement.scrollTop
         //元素内容的总高度
         var scrollHeight=document.documentElement.scrollHeight  
          if(clientHeight+scrollTop>=scrollHeight){
              //偏移量，刚开始显示page=0 显示30条数据 下一次从30条开始再显示30条，就不会重复了
              page=page+30
              getArtists(startType,startArae,letter,page,function(res){
                  var data=JSON.parse(res)
                  showUi(title,data,true)
            })
          }
       }





 </script>
</body>
</html>